<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app"></div>
<script src="js/vue.js"></script>
<script>
    const app = Vue.createApp({
        setup(props, context) {
            const {ref, watch, watchEffect} = Vue
            let brand = ref('')
            let site = ref('')

            // 侦听器 -- 侦听一个属性
            /*
             1) 有惰性
             2) 更加具体
             3) 可以访问属性之前的值
             4) 可配置的 <非惰性, 深度监视>
            */
            /*
            watch(brand, (currentValue, preValue)=>{
                // 相应业务
                console.log('现在的:', currentValue);
                console.log('之前的:', preValue);
            }, {
                // 非惰性
                // immediate: true
                deep: true
            })
            */

            /*
            1) 非性
            2) 更加抽象
            3) 不可以访问属性之前的值
           */
            watchEffect(()=>{
                console.log('开始侦听了!....');
                console.log(brand.value);
                console.log(site.value);
            })

            return {
                brand,
                site
            }
        },

        template:`
          <div>
            品牌: <input v-model="brand">
            <p>输入的品牌是: {{brand}}</p>
            <p>-------------------------</p>
            网址: <input v-model="site">
            <p>输入的网址是: {{site}}</p>
          </div>
        `
    }).mount('#app');
</script>
</body>
</html>